<template>
  <div class="chart">
    <!-- 顶部导航 -->
    <hmnavbar title="市场数据" path="/find" />
    <!-- 城市与岗位选择 -->
    <van-dropdown-menu>
      <van-dropdown-item :title="city" ref="cityItem">
        <van-index-bar>
          <!-- 遍历城市索引对象 -->
          <template v-for="(value, key, index) in cityIndex">
            <van-index-anchor
              :index="key"
              :key="index"
              style="background-color:#f7f4f5;"
            />
            <!-- 遍历城市索引对应的城市列表（即vakue）将索引对应的城市渲染出来 -->
            <van-cell
              :title="item[0]"
              v-for="(item, indexs) in value"
              :key="indexs"
              @click="changeCity(item)"
            />
          </template>
        </van-index-bar>
      </van-dropdown-item>
      <van-dropdown-item :title="position" ref="positionItem">
        <!-- 遍历被选中城市对应的岗位列表 -->
        <van-cell
          :title="item"
          v-for="(item, index) in positionList"
          :key="index"
          @click="changePosition(item)"
        ></van-cell>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 工资收入图表 -->
    <div class="salary">
      <div class="title">工资收入</div>
      <canvas id="salary" width="345" height="225" ref="canvas"></canvas>
    </div>
    <!-- 工作经验图表 -->
    <div class="experience">
      <div class="title"></div>
      <canvas id="experience" width="345" height="225"></canvas>
    </div>
  </div>
</template>

<script>
import { getMarketDataApi, getChartsDataApi } from '../.././../api/find.js'
// 导入绘图插件
import F2 from '@antv/f2'
export default {
  data () {
    return {
      cityIndex: {} /* 城市和岗位信息 */,
      positionList: [] /* 被选中城市对应的岗位列表 */,
      city: '' /* 被选中的城市 */,
      position: '' /* 被选中的岗位 */,
      salaryList: [] /* 工资收入列表 */,
      historySalaries: [] /* 历史平均工资变化 */,
      experienceSalary: [] /* 工作经验 */,
      emploies: [] /* 就业形势 */
    }
  },
  async created () {
    await this.getMarketData()
    // 获取图表数据之前要获得被选中的城市和岗位，所以将上面操作改成同步
    await this.getChartsData()
    // 绘制图标之前要先获取数据，所以将获取数据过程也改成同步的
    this.drawSalary()
    this.drawExperience()
  },
  methods: {
    // 获取城市和岗位数据
    async getMarketData () {
      const res = await getMarketDataApi()
      // 存储获取的数据并进行渲染
      this.cityIndex = res.data
      // 一进页面默认被选中的城市是热门城市中的第一个
      this.city = this.cityIndex['热门'][0][0]
      // 保存被选中的城市对应的岗位列表
      this.positionList = this.cityIndex['热门'][0][1]
      // 一进页面默认被选中的岗位是城市对应岗位的第一个
      this.position = this.positionList[0]
    },
    // 切换城市信息
    async changeCity (item) {
      // 修改被选中的城市信息
      this.city = item[0]
      // 修改该城市对应的岗位列表
      this.positionList = item[1]
      // 修改默认被选中的岗位
      this.position = this.positionList[0]
      // 关闭面板
      this.$refs.cityItem.toggle()
      await this.getChartsData()
      this.drawSalary()
      this.drawExperience()
    },
    // 切换岗位
    async changePosition (item) {
      // 修改被选中的岗位
      this.position = item
      // 关闭面板
      this.$refs.positionItem.toggle()
      await this.getChartsData()
      this.drawSalary()
      this.drawExperience()
    },
    // 获取绘制图标所需的数据
    async getChartsData () {
      const res = await getChartsDataApi({
        city: this.city,
        position: this.position
      })
      // 存储获取的数据
      this.salaryList = res.data.percentSalary.map(item => {
        item = {
          name: item.assetType,
          percent: item.percent,
          a: 1
        }
        return item
      })
      this.historySalaries = res.data.yearSalary
      this.experienceSalary = res.data.experienceSalary
      this.emploies = res.data.employmentNum
    },
    // 绘制工资收入图表
    drawSalary () {
      const data = this.salaryList

      const map = {}
      data.forEach(function (obj) {
        map[obj.name] = obj.percent + '%'
      })

      const chart = new F2.Chart({
        id: 'salary',
        pixelRatio: window.devicePixelRatio,
        padding: [20, 'auto']
      })
      chart.source(data, {
        percent: {
          formatter: function formatter (val) {
            return val + '%'
          }
        }
      })
      chart.tooltip(false)
      chart.legend({
        position: 'right',
        itemFormatter: function itemFormatter (val) {
          return val + '      ' + map[val]
        }
      })
      chart.coord('polar', {
        transposed: true,
        innerRadius: 0.65,
        radius: 0.75
      })
      chart.axis(false)
      chart
        .interval()
        .position('a*percent')
        .color('name', ['#FE5D4D', '#3BA4FF', '#737DDE', '#f7c739', '#73deb3'])
        .adjust('stack')

      chart.guide().html({
        position: ['50%', '50%'],
        html: `<div ref="add" style="width: 250px;height: 40px;text-align: center;font-size:12px">
      <div >平均</div>
      <div >￥17610</div>
    </div>`
      })
      chart.render()
    },
    // 绘制工作经验图表
    drawExperience () {
      const data = this.experienceSalary
      // const data = [
      //   {
      //     info: '周一',
      //     value: 3000
      //   },
      //   {
      //     info: '周二',
      //     value: 12000
      //   },
      //   {
      //     info: '周三',
      //     value: 17000
      //   },
      //   {
      //     info: '周四',
      //     value: 25000
      //   },
      //   {
      //     info: '周五',
      //     value: 32000
      //   },
      //   {
      //     info: '周六',
      //     value: 38000
      //   },
      //   {
      //     info: '周日',
      //     value: 45000
      //   }
      // ]

      const chart = new F2.Chart({
        id: 'experience',
        pixelRatio: window.devicePixelRatio
      })

      chart.source(data, {
        value: {
          tickCount: 5,
          min: 0
        },
        info: {
          range: [0, 1]
        }
      })
      chart.tooltip({
        showCrosshairs: true,
        showItemMarker: false,
        onShow: function onShow (ev) {
          const items = ev.items
          items[0].name = null
          items[0].value = '$ ' + items[0].num
        }
      })
      chart.axis('info', {
        label: function label (text, index, total) {
          const textCfg = {}
          if (index === 0) {
            textCfg.textAlign = 'left'
          } else if (index === total - 1) {
            textCfg.textAlign = 'right'
          }
          textCfg.rotate = Math.PI / 2
          textCfg.textAlign = 'start'
          textCfg.textBaseline = 'middle'
          return textCfg
        }
      })
      chart.area().position('info*value')
      chart.line().position('info*value')
      chart
        .point()
        .position('info*value')
        .style({
          stroke: '#fff',
          lineWidth: 1
        })
      chart.render()
    }
  }
}
</script>

<style lang="less" scoped>
.chart {
  .salary {
    padding: 0 15px;
    margin-top: 3px;
    .title {
      padding-top: 18px;
      font-size: 18px;
      color: #222;
    }
  }
  .experience {
    padding: 0 15px;
    margin-top: 3px;
    .title {
      padding-top: 18px;
      font-size: 18px;
      color: #222;
    }
  }
}
</style>
